<template>
  <div>
        搜索：
      <el-select v-model="searchType" placeholder="请选择搜索类型" >
    <el-option
      v-for="item in options"
      :key="item.searchType"
      :label="item.label"
      :value="item.searchType">
    </el-option>
  </el-select>
    <el-input v-model="searchValue" placeholder="请输入搜索内容" clearable></el-input>
    <el-button icon="el-icon-search" circle @click="findData"></el-button>
  </div>
</template>

<script>
import {createNamespacedHelpers} from "vuex";
const {mapMutations,mapActions}  = createNamespacedHelpers('adminData');

export default {
    data(){
        return{
        options: [{
          searchType: 'admin_loginName',
          label: '用户名'
        }, {
          searchType: 'admin_phone',
          label: '电话'
        }, {
          searchType: 'admin_name',
          label: '姓名'
        }
        ],
        searchType: '',
        searchValue: ""
        }
    },
    methods:{
        findData(){
            const data = {};
            data.type = this.searchType;
            data.value = this.searchValue;
            this.searchData(data);
            this.getAdminDataAsync();//重新显示页面
        },
        ...mapMutations(['searchData']),
        ...mapActions(['getAdminDataAsync'])//搜索之后重新显示
    }
}
</script>

<style scoped>


    /* 输入框样式 */
.el-input__inner {
  /* s设置输入框的宽度 */
  width: 245px;
  margin: 0 0 30px 0;
}
.el-input {
  width: 245px;
  margin-bottom: 30px;
}
.el-button {
  margin-left: 30px;
}
.el-main {
  text-align: left;
  line-height: 0;
  margin-left: 20px;
  margin-top: 8px;
}


</style>